<template>
  <div class="dailyTask" v-title data-title="项目任务单明细页面">
    <home-nav :userData="userinfo"></home-nav>
    <div class="navigator">
      <div class="baseinfo">
        <div style="display: flex">
          <span style="margin: 0px auto 10px auto; font-weight: bold; font-size: 20px">项目任务单明细</span>
          <span style="color: #31a0e1" v-show="id" @click="openHistory">操作日志</span>
        </div>
        <a-form-model class="hte-form-model">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="任务单编号">
                <a-input v-model="form.taskNo" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="任务单名称">
                <a-input v-model="form.taskName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目信息">
                <a-input v-model="projectNoAndName" disabled />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目节点" prop="timeNodeCode">
                <a-select
                  v-model="form.timeNodeCode"
                  placeholder="请选择未报工的项目节点"
                  :options="timeNodeCodeOptions"
                  notFoundContent="请先选择项目"
                  :disabled="kpi.data.length > 0"
                  style="width: 100%"
                >
                  <a-icon slot="suffixIcon" type="plus" />
                </a-select>
              </a-form-model-item>
            </a-col>
            <div v-if="form.projectNo != ''">
              <a-col :span="8" v-if="form.taskType == '30'">
                <a-form-model-item label="产品系统">
                  <a-input v-model="form.productSystemName" disabled />
                </a-form-model-item>
              </a-col>

              <a-col :span="8" v-if="form.projectNo != '' && form.taskType == '30'">
                <a-form-model-item label="迭代负责人">
                  <a-input v-model="form.handlerName" disabled />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="创建人">
                  <a-input v-model="form.createUserName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="创建时间" class="disable-input-bg">
                  {{ form.createDate ? timeFormat(form.createDate) : nowDate }}
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="主导经营体">
                  <a-input v-model="form.mainDeptName" disabled />
                </a-form-model-item>
              </a-col>
            </div>
            <div v-if="form.timeNodeCode">
              <a-col :span="8">
                <a-form-model-item class="disable-input-bg" label="节点开始时间">
                  {{ timeFormat(form.startDate) }}
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item class="disable-input-bg" label="节点完成时间">
                  {{ timeFormat(form.endDate) }}
                </a-form-model-item>
              </a-col>
              <a-col :span="8" v-if="form.projectNo != '' && form.taskType == '30'">
                <a-form-model-item label="版本号">
                  <a-input v-model="form.versionNo" disabled />
                </a-form-model-item>
              </a-col>
            </div>
          </a-row>
          <a-row :gutter="24" v-if="form.taskType == '30'">
            <a-tooltip>
              <template slot="title">
                <span>选择是则需要上传《需求规格说明书》提交给业务负责人确认审核，按上线需要提测，可不提测。</span>
              </template>
              <a-col :span="8">
                <a-form-model-item ref="businessConfirm" label="需要审批确认" prop="businessConfirm">
                  <a-input :value="form.businessConfirm == '1' ? '是' : '否'" disabled />
                </a-form-model-item>
              </a-col>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                <span
                  >是否已上线是指【整个任务单的完成状态是以该字段为准，即使所有子任务已完成】<br />当所有子任务和缺陷都完成时，任务单创建人或迭代负责人可修改该状态。</span
                >
              </template>
              <a-col :span="8">
                <a-form-model-item ref="hasSendNotice" label="是否已上线" prop="hasSendNotice">
                  <a-input
                    :value="
                      form.hasSendNotice == '1'
                        ? '未完成'
                        : form.hasSendNotice == '2'
                        ? '已完成并且已发通知'
                        : '已完成但无需发通知'
                    "
                    disabled
                  />
                </a-form-model-item>
              </a-col>
            </a-tooltip>
            <a-col :span="8">
              <a-form-model-item ref="testUserName" label="测试员" prop="testUserName">
                <a-input :value="form.testUserName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item ref="qualityScore" label="质量分" prop="qualityScore">
                <a-input v-model="form.qualityScore" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item ref="testConfirmDate" class="disable-input-bg" label="测试时间" prop="testConfirmDate">
                {{ timeFormat(form.testConfirmDate) }}
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" v-if="form.taskType == '30'">
            <a-col :span="24">
              <a-form-model-item label="测试结果">
                <a-textarea
                  v-model="form.testConfirm"
                  :auto-size="{ minRows: 1, maxRows: 5 }"
                  style="width: 100%"
                  disabled
                  readOnly
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="开放范围:">
                <a-textarea
                  v-model="form.openRangeName"
                  :auto-size="{ minRows: 1, maxRows: 5 }"
                  style="width: 100%"
                  disabled
                  readOnly
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <div v-if="form.timeNodeCode">
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="任务单完成目标:">
                  <a-textarea
                    v-model="form.target"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                    style="width: 100%"
                    disabled
                    readOnly
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </a-form-model>
        <a-divider style="margin: 10px 0" />
        <div class="report" style="margin-top: 10px; border: solid 1px red" v-show="btnShow">
          <div class="info-title" style="margin: 5px 10px">
            任务单报工
            <a-button @click="saveTask(false)" v-show="btnShow && !reportFlag">保存</a-button>
            <a-button type="primary" @click="reportTask(true)" v-show="btnShow && reportFlag">确认报工</a-button>
            <span style="margin-left: 10px">当前报工子任务单明细序号为：{{ currentIndex }}</span>,
            <span style="margin-left: 10px" v-if ="form.taskType == '40'">本任务单内容：{{ currentRecord.timeNode }}</span>
          </div>
          <a-form-model class="hte-form-model" :model="form">
            <a-row :gutter="24" style="padding: 5px">
              <a-col :span="24">
                <a-form-model-item ref="reportMemo" label="实际完成情况" prop="reportMemo">
                  <a-textarea
                    v-model="form.reportMemo"
                    @blur="
                      () => {
                        $refs.reportMemo.onFieldBlur()
                      }
                    "
                    :auto-size="{ minRows: 3, maxRows: 6 }"
                    style="width: 100%"
                    placeholder="请填写任务单实际完成情况，500字以内"
                    :maxLength="500"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="padding: 5px" v-if="form.taskType == '40'">
              <a-col :span="24">
                <a-form-model-item ref="workHighLight" label="工作亮点输出" prop="workHighLight">
                  <a-textarea
                    v-model="form.workHighLight"
                    @blur="
                      () => {
                        $refs.workHighLight.onFieldBlur()
                      }
                    "
                    :auto-size="{ minRows: 3, maxRows: 6 }"
                    style="width: 100%"
                    placeholder="输入完成该任务的亮点做法，格式：专业+亮点内容。如“基建专业，浇筑前提前了15天查天气预报，与施工方每2天复盘调整一次施工安排，500字以内"
                    :maxLength="500"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="padding: 5px">
              <a-col :span="8" v-show="form.taskType != '30'">
                <a-form-model-item ref="planCompletionDate" label="预计完成时间" prop="planCompletionDate">
                  <a-date-picker
                    v-model="form.planCompletionDate"
                    placeholder="请输入预计完成时间"
                    allowClear
                    @change="planTimeSelect"
                    :disabled-date="disabledStartDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="realCompletionDate" label="实际完成时间" prop="realCompletionDate">
                  <a-date-picker
                    v-model="form.realCompletionDate"
                    placeholder="请输入实际完成时间"
                    allowClear
                    @change="realTimeSelect"
                    :disabled-date="disabledCurrent"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" v-show="delayFlag" style="padding: 5px">
              <a-col :span="24">
                <a-form-model-item ref="delayReason" label="延误原因说明:" prop="delayReason">
                  <a-textarea
                    v-model="form.delayReason"
                    @blur="
                      () => {
                        $refs.delayReason.onFieldBlur()
                      }
                    "
                    :auto-size="{ minRows: 3, maxRows: 6 }"
                    style="width: 100%"
                    placeholder="请填写延误原因，500字以内"
                    :maxLength="500"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <a-divider style="margin: 10px 0" />
        </div>
        <div class="info-title" style="margin-top: 10px">
          相关附件
          <ht-upload
            ref="myUpload"
            class="upload-demo"
            multiple
            dbKey="Trd"
            busField="workTask"
            busType="workTask"
            :busKey="id"
            ftpKey="ftp"
            v-model="fileList"
            :show-file-list="false"
          >
            <a-button type="primary"><a-icon type="plus" />新增附件</a-button>
          </ht-upload>
          <span>
            <img src="@/assets/attention-red.png" alt="" style="width: 12px; margin: 0px 5px 0px 5px" />
            <span style="font-size: 14px"
              >附件非必填，如有相关附件可以上传，例如收益计算明细，计算方法，该任务单的方案、规划、工作要求等。</span
            >
          </span>
        </div>
        <div style="margin-top: 10px">
          <a-table
            class="hte-table-content"
            :columns="uploadColumns"
            :data-source="fileQueryList"
            :pagination="false"
            :rowKey="
              (record, index) => {
                return index
              }
            "
            bordered
            size="middle"
            v-show="fileQueryList.length > 0"
          >
            <a
              slot="name"
              slot-scope="text, record"
              @click="previewAttach(record.id, record.fileName)"
              href="javascript:void(0)"
              title="点击预览附件"
              style="color: blue"
              >{{ text }}</a
            >
            <span slot="uploadTime" slot-scope="text">
              {{ timeFormat(text) }}
            </span>
            <span slot="aciton" slot-scope="text, record">
              <span
                style="color: blue; cursor: pointer"
                @click="deletefj(record.id)"
                type="primary"
                v-if="record.uploader == currentUserId"
                >删除</span
              >
              <span
                style="color: blue; cursor: pointer; margin-left: 5px"
                @click="doDownLoadBatch(record.id)"
                type="primary"
                >下载</span
              >
            </span>
          </a-table>
        </div>

        <a-divider style="margin: 10px 0" />

        <div>
          <div style="display:flex;"><div class="info-title">子任务单明细</div>
          <a-checkbox v-model="checked" style="margin-left:15px;margin-top:2px;" @change="checkBoxChange">只看自己的</a-checkbox></div>
          <a-tooltip :visible="form.taskType == '30' && tooltipFlag">
            <template slot="title">
              <span
                >绿色代表及按时或提前完成，本行文字显示为；红色代表逾期未完成或者逾期完成；蓝色背景为当前报工子任务。</span
              >
            </template>
            <a-table
              class="hte-table-content"
              :columns="kpi.columns"
              :data-source="kpi.data"
              bordered
              size="middle"
              rowKey="id"
              :pagination="false"
              :customRow="customRow"
              :rowClassName="tableRowClass"
              :loading="tableLoading"
              :row-selection="rowSelection"
            >
              <template slot="index" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ text }}</span>
              </template>
              <template slot="timeNode" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ text }}</span>
              </template>
              <template slot="jobContent" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ text }}</span>
              </template>
              <template slot="planStartDate" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ dateFormat(record.planStartDate) }}</span>
              </template>
              <template slot="completionDate" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ dateFormat(record.completionDate) }}</span>
              </template>
              <template slot="addReportUserName" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ text }}</span>
              </template>
              <template slot="planCompletionDate" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ dateFormat(record.planCompletionDate) }}</span>
              </template>
              <template slot="realCompletionDate" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ dateFormat(record.realCompletionDate) }}</span>
              </template>
              <template slot="reportMemo" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ text }}</span>
              </template>
              <template slot="delayReason" slot-scope="text, record">
                <span :class="`wordColor${record.word}`">{{ text }}</span>
              </template>

              <template slot="id" slot-scope="text">
                {{ text + 'p' }}
              </template>
              <!-- <template slot="action" slot-scope="text, record">
                <span v-if="record.id" style="color: blue" @click="applyData(record)">发起数据申请</span><br />
                <span v-if="record.id" style="color: blue" @click="openProcessDetail(record)">数据流程</span>
              </template> -->
              <template slot="personalAttach" slot-scope="text, record">
                <a-button type="default" @click="toFile(record)" v-if="record.id" :disabled=" !(record.addReportUserId == currentUserId || form.createUserId == currentUserId) ? true : false"
                  >附件&nbsp;<span style="size: 10px; color: rgb(255, 116, 93)"
                    >({{ record.fileAmount }})</span
                  ></a-button
                >
              </template>
            </a-table>
          </a-tooltip>
        </div>
      </div>
    </div>
    <a-modal
      v-model="visibleModelHistory"
      width="70vw"
      :bodyStyle="{ padding: '10px', backgroundColor: '#f4f5fa' }"
      title="变更历史"
      :footer="null"
      :key="id"
    >
      <task-change-history :hid="id"></task-change-history>
    </a-modal>

    <a-modal
      v-model="visibleModelProcess"
      width="70vw"
      :bodyStyle="{ padding: '10px', backgroundColor: '#f4f5fa' }"
      title="流程状态"
      :footer="null"
      :key="processId"
    >
      <task-tech-process :detailId="processId"></task-tech-process>
    </a-modal>

    <a-modal
      class="selectedPerson"
      title="附件信息"
      :visible="attachVisible"
      width="80vw"
      @cancel="handleAttachClose()"
      :footer="null"
      :destroyOnClose="true"
      :key="'attach' + busKey"
    >
      <attach-tab
        :bus-field="busField"
        :bus-key="busKey"
        :bus-type="busType"
        @closeAttachModal="handleAttachClose()"
      ></attach-tab>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction,previewAttach } from '@/api/manage'
import moment from 'moment'
import '@/config/upload.install.js'
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { getParamValFromUrl, formatFileSize, endWith } from '@/utils/common.js'

const uploadColumns = [
  {
    title: '附件名称',
    dataIndex: 'fileName',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '上传人',
    dataIndex: 'uploaderName',
    width: '10%',
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    align: 'center',
    width: '15%',
    scopedSlots: { customRender: 'uploadTime' },
  },
  {
    title: '操作',
    dataIndex: 'aciton',
    align: 'center',
    scopedSlots: { customRender: 'aciton' },
    width: '10%',
  },
]

export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    TaskChangeHistory: () => import('@views/myTask/TaskChangeHistory'),
    TaskTechProcess: () => import('@views/myTask/TaskTechProcess'),
    AttachTab: () => import('@/views/projectBuildTask/AttachTab'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'projectTaskDetail',
      },
      uploadColumns,
      selectedRowKeys: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      tableSelectKey: '',
      btnShow: false,
      form: {
        id: '',
        projectBuildId: '',
        projectNo: '',
        projectName: '',
        timeNodeCode: '',
        mainDeptId: '',
        mainDeptName: '',
        createUserName: '',
        createDate: '',
        startDate: '',
        endDate: '',
        target: '',
        taskBuildType: '3',
        taskBugType: ' ',
        saveFlag: false,
        status: '',
        reportMemo: '',
        delayReason: '',
        planCompletionDate: null,
        realCompletionDate: null,
        taskNo: '',
        versionNo: '',
        handlerId: '',
        handlerName: '',
        hasSendNotice: '',
        productSystem: '',
        productSystemName: '',
        openRange: '',
        openRangeName: '',
        businessConfirm: '',
        qualityScore: '',
        testConfirm: '',
        testUserId: '',
        testUserName: undefined,
        testConfirmDate: '',
        workHighLight:''
      },
      url: {
        save: '/projectWorkTask/saveProjectTask',
        getAttachInfo: '/tp/attach/getAttaches',
        getProjectTask: '/projectWorkTask/queryProjectTaskById',
        sendTask: '/projectWorkTask/sendTask',
        initTimeNodeOption: '/projectBuildTime/queryListByBuildId',
        getProjectBuildById: '/projectBuild/queryById',
        reportTask: '/projectWorkTask/reportTask',
        downLoadBatch: '/common/downLoadBatch',
        deleteBatch: '/tp/attach/delete',
      },
      kpi: {
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 50,
            customRender: (text, record, index) => `${index + 1}`,
          },
          {
            title: '子节点名称',
            dataIndex: 'timeNode',
            width: '10%',
            scopedSlots: { customRender: 'timeNode' },
          },
          {
            title: '子节点内容',
            dataIndex: 'jobContent',
            scopedSlots: { customRender: 'jobContent' },
          },
          {
            title: '子节点开始时间',
            dataIndex: 'planStartDate',
            width: '8%',
            scopedSlots: { customRender: 'planStartDate' },
          },
          {
            title: '子节点完成时间',
            dataIndex: 'completionDate',
            width: '8%',
            scopedSlots: { customRender: 'completionDate' },
          },
          {
            title: '具体执行人员',
            dataIndex: 'addReportUserName',
            width: '8%',
          },
          {
            title: '预计完成时间',
            dataIndex: 'planCompletionDate',
            width: '8%',
            scopedSlots: { customRender: 'planCompletionDate' },
          },
          {
            title: '实际完成时间',
            dataIndex: 'realCompletionDate',
            width: '8%',
            scopedSlots: { customRender: 'realCompletionDate' },
          },
          {
            title: '具体完成情况',
            dataIndex: 'reportMemo',
            width: '15%',
          },
          {
            title: '延误原因',
            dataIndex: 'delayReason',
            width: '15%',
          },
          {
            title: '个人附件',
            dataIndex: 'personalAttach',
            scopedSlots: { customRender: 'personalAttach' },
            width: '100px',
          },
        ],
        data: [],
        selRowIds: [],
      },
      fileList: [],
      fileQueryList: [],
      id: '',
      addFlag: false,
      currentUserId: '',
      timeNodeCodeOptions: [],
      timeListData: [],
      nowDate: moment().format('YYYY-MM-DD'),
      maxTimeNodeCode: '',
      detailId: 0,
      delayFlag: false,
      detailStartDate: '',
      detailEndDate: '',
      reportFlag: false,
      projectNoAndName: '',
      currentIndex: '',
      currentRecord: {},
      visibleModelHistory: false,
      columns30: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          width: 50,
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '子节点名称',
          dataIndex: 'timeNode',
          width: '10%',
          scopedSlots: { customRender: 'timeNode' },
        },
        {
          title: '子节点内容',
          dataIndex: 'jobContent',
          scopedSlots: { customRender: 'jobContent' },
        },
        {
          title: '计划开始时间',
          dataIndex: 'planStartDate',
          width: '8%',
          scopedSlots: { customRender: 'planStartDate' },
          sorter: (a, b) => {
            return a.planStartDate.localeCompare(b.planStartDate)
          },
        },
        {
          title: '计划完成时间',
          dataIndex: 'completionDate',
          width: '8%',
          scopedSlots: { customRender: 'completionDate' },
          sorter: (a, b) => {
            return a.completionDate.localeCompare(b.completionDate)
          },
        },
        {
          title: '具体执行人员',
          dataIndex: 'addReportUserName',
          width: '8%',
          scopedSlots: { customRender: 'addReportUserName' },
        },
        {
          title: '实际完成时间',
          dataIndex: 'realCompletionDate',
          width: '8%',
          scopedSlots: { customRender: 'realCompletionDate' },
          sorter: (a, b) => {
            return a.realCompletionDate.localeCompare(b.realCompletionDate)
          },
        },
        {
          title: '具体完成情况',
          dataIndex: 'reportMemo',
          width: '15%',
          scopedSlots: { customRender: 'reportMemo' },
        },
        {
          title: '延误原因',
          dataIndex: 'delayReason',
          width: '15%',
          scopedSlots: { customRender: 'delayReason' },
        },
        {
          title: '个人附件',
          dataIndex: 'personalAttach',
          scopedSlots: { customRender: 'personalAttach' },
          width: '100px',
        },
      ],
      columns40: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 50,
            customRender: (text, record, index) => `${index + 1}`,
          },
          {
            title: '子节点名称',
            dataIndex: 'timeNode',
            width: '10%',
            scopedSlots: { customRender: 'timeNode' },
          },
          {
            title: '子节点内容',
            dataIndex: 'jobContent',
            scopedSlots: { customRender: 'jobContent' },
          },
          {
            title: '子节点开始时间',
            dataIndex: 'planStartDate',
            width: '8%',
            scopedSlots: { customRender: 'planStartDate' },
          },
          {
            title: '子节点完成时间',
            dataIndex: 'completionDate',
            width: '8%',
            scopedSlots: { customRender: 'completionDate' },
          },
          {
            title: '具体执行人员',
            dataIndex: 'addReportUserName',
            width: '8%',
          },
          {
            title: '预计完成时间',
            dataIndex: 'planCompletionDate',
            width: '8%',
            scopedSlots: { customRender: 'planCompletionDate' },
          },
          {
            title: '实际完成时间',
            dataIndex: 'realCompletionDate',
            width: '8%',
            scopedSlots: { customRender: 'realCompletionDate' },
          },
          {
            title: '具体完成情况',
            dataIndex: 'reportMemo',
            width: '10%',
          },
          {
            title: '工作亮点',
            dataIndex: 'workHighLight',
            width: '10%',
          },
          {
            title: '延误原因',
            dataIndex: 'delayReason',
            width: '10%',
          },
          {
            title: '个人附件',
            dataIndex: 'personalAttach',
            scopedSlots: { customRender: 'personalAttach' },
            width: '100px',
          },
        ],
      tooltipFlag: false,
      processId: 0,
      visibleModelProcess: false,
      columnsAddFlag: false,
      attachVisible: false,
      busField: 'dailyTaskAttach',
      busKey: '',
      busType: 'dailyTaskAttach',
      tableLoading: false,
      checked: false,
      oldList: [],
      selectedRows:[],
      selectedRowKeys:[],
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
          this.selectedRowKeys = selectedRowKeys
          if (this.selectedRowKeys.length > 0) {
            this.detailId = this.selectedRowKeys[0]
            this.selectedRows = []
            this.selectedRowKeys = []
            this.initData(this.id)
          }
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.reportStatus == '2' ? true :  record.addReportUserId == this.currentUserId ? false : true,
          },
        }),
        type: 'radio'
      }
    },
  },
  created() {
    const obj = this.$route.query
    this.id = obj.id
    this.detailId = obj.detailId
    if (this.id) {
      this.initData(this.id)
    }
    this.currentUserId = Vue.ls.get(USER_INFO).username
  },
  methods: {
    tableRowClass(record, index) {
      if (record.id == this.detailId) {
        this.currentIndex = index + 1
        this.currentRecord = record
        return 'rowClass'
      } else {
        return ''
      }
    },
    reportTask(comfirmFlag) {
      if (!this.form.reportMemo) {
        // this.$message.warning('任务完成情况不能为空');
        // return;
        this.form.reportMemo = '已完成'
      }
      if (!this.form.realCompletionDate) {
        this.$message.warning('实际完成时间不能为空')
        return
      }
      if (!this.delayFlag && !this.form.realCompletionDate) {
        this.$message.warning('实际完成时间不能为空')
        return
      }
      if (this.delayFlag && !this.form.delayReason) {
        this.$message.warning('延误原因不能为空')
        return
      }
      var obj = {}
      obj.id = this.form.id
      obj.detailId = this.detailId
      obj.reportMemo = this.form.reportMemo
      obj.workHighLight = this.form.workHighLight
      obj.delayReason = this.form.delayReason
      obj.comfirmFlag = comfirmFlag
      obj.planCompletionDate = this.form.planCompletionDate
      obj.realCompletionDate = this.form.realCompletionDate
      if (obj.comfirmFlag) {
        if (obj.realCompletionDate == '' || obj.realCompletionDate == null || obj.realCompletionDate == undefined) {
          this.$message.warning('实际完成时间不能为空')
          return
        }
      }
      const that = this
      this.$confirm({
        title: '是否确认报工',
        onOk() {
          postAction(that.url.reportTask, obj)
            .then((res) => {
              if (res.code === 200) {
                that.$message.success('报工成功')
                that.initData(that.form.id)
              } else {
                const msg = res.message == null ? res.result : res.message
                that.$message.error(msg)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        },
        onCancel() {},
      })
    },
    saveTask(comfirmFlag) {
      if (this.delayFlag && !this.form.delayReason) {
        this.$message.warning('延误原因不能为空')
        return
      }
      var obj = {}
      obj.id = this.form.id
      obj.detailId = this.detailId
      obj.reportMemo = this.form.reportMemo
      obj.workHighLight = this.form.workHighLight
      obj.delayReason = this.form.delayReason
      obj.comfirmFlag = comfirmFlag
      obj.planCompletionDate = this.form.planCompletionDate
      obj.realCompletionDate = this.form.realCompletionDate
      const that = this
      postAction(that.url.reportTask, obj)
        .then((res) => {
          if (res.code === 200) {
            that.$message.success('保存成功')
            that.initData(that.form.id)
          } else {
            const msg = res.message == null ? res.result : res.message
            that.$message.error(msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    planTimeSelect(date, dateString) {
      if (date == null) {
        if (
          this.form.realCompletionDate &&
          moment(this.form.realCompletionDate).diff(moment(this.detailEndDate), 'day') > 0
        ) {
          this.delayFlag = true
        } else {
          this.delayFlag = false
          this.form.delayReason = ''
        }
        this.form.planCompletionDate = dateString
        return
      }
      if (date.diff(moment(this.detailEndDate), 'day') > 0) {
        this.delayFlag = true
      } else if (
        this.form.realCompletionDate &&
        moment(this.form.realCompletionDate).diff(moment(this.detailEndDate), 'day') > 0
      ) {
        this.delayFlag = true
      } else {
        this.delayFlag = false
        this.form.delayReason = ''
      }
      this.form.planCompletionDate = dateString
    },
    realTimeSelect(date, dateString) {
      if (date == null) {
        if (
          this.form.planCompletionDate &&
          moment(this.form.planCompletionDate).diff(moment(this.detailEndDate), 'day') > 0
        ) {
          this.delayFlag = true
        } else {
          this.delayFlag = false
          this.form.delayReason = ''
        }
        this.reportFlag = false
        this.form.realCompletionDate = dateString
        return
      }
      if (date.diff(moment(this.detailEndDate), 'day') > 0) {
        this.delayFlag = true
      } else if (
        this.form.planCompletionDate &&
        moment(this.form.planCompletionDate).diff(moment(this.detailEndDate), 'day') > 0
      ) {
        this.delayFlag = true
      } else {
        this.delayFlag = false
        this.form.delayReason = ''
      }
      this.form.realCompletionDate = dateString
      this.reportFlag = true
    },
    timeFormat(time) {
      if (time) {
        return moment(time).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    disabledStartDate(current) {
      return current < moment(this.form.startDate).subtract(1, 'days').endOf('day')
    },
    disabledStartDateAndEnd(current) {
      return current < moment(this.form.startDate).subtract(1, 'days').endOf('day') || current > moment().endOf('day')
    },
    disabledCurrent(current) {
      return current > moment().endOf('day')
    },
    initTimeNodeOption(id) {
      var vm = this
      vm.timeNodeCodeOptions = []
      //vm.form.timeNodeCode = ''
      getAction(vm.url.initTimeNodeOption, { projectBuildId: id }).then((res) => {
        if (res.code === 200) {
          vm.timeListData = res.result || []
          let newarr = vm.timeListData.filter((item) => {
            return item.reportStatus == null || item.reportStatus != '2'
          })
          newarr.forEach((element) => {
            vm.timeNodeCodeOptions.push({
              label: element.timeNode,
              value: element.timeNodeCode,
            })
          })
        } else {
          //const msg = res.message == null ? res.data : res.message;
          this.$message.error(res.message)
        }
      })
    },
    initData(id) {
      const _this = this
      getAction(_this.url.getProjectTask, { id: id }).then((res) => {
        if (res.code === 200) {
          _this.initTimeNodeOption(res.result.projectBuildId)
          _this.form = res.result
          if (_this.form.taskType == '30') {
            _this.kpi.columns = _this.columns30
          }

          if (_this.form.taskType == '40') {
            _this.kpi.columns = _this.columns40
          }

          // Vue 不能检测数组和对象的变化
          this.$set(_this.form, 'timeNodeCode', _this.form.timeNodeCode)
          getAction(_this.url.getProjectBuildById, { id: _this.form.projectBuildId }).then((resProject) => {
            _this.form.projectNo = resProject.result.projectNo
            _this.form.projectName = resProject.result.projectName
            _this.projectNoAndName = resProject.result.projectNo + ' && ' + resProject.result.projectName
          })
          _this.kpi.data = res.result.timeDetail
          try {
            _this.kpi.data.forEach((item) => {
              let completionDate = item.completionDateAudit ? item.completionDateAudit : item.completionDate
              if (
                item.addReportUserId === _this.currentUserId &&
                item.id == _this.detailId &&
                (item.planCompletionDate
                  ? moment(item.planCompletionDate).diff(completionDate, 'day') > 0 ||
                    (item.realCompletionDate
                      ? moment(item.realCompletionDate).diff(completionDate, 'day') > 0
                      : moment().diff(completionDate, 'day') > 0)
                  : item.realCompletionDate
                  ? moment(item.realCompletionDate).diff(completionDate, 'day') > 0
                  : moment().diff(completionDate, 'day') > 0)
              ) {
                _this.delayFlag = true
              }
              if (item.addReportUserId === _this.currentUserId && item.id == _this.detailId) {
                _this.btnShow = true
                _this.form.reportMemo = item.reportMemo
                _this.form.workHighLight = item.workHighLight
                _this.form.delayReason = item.delayReason
                _this.detailStartDate = item.planStartDateAudit ? item.planStartDateAudit : item.planStartDate
                _this.detailEndDate = item.completionDateAudit ? item.completionDateAudit : item.completionDate
                _this.$set(_this.form, 'planCompletionDate', item.planCompletionDate || null)
                _this.$set(_this.form, 'realCompletionDate', item.realCompletionDate || null)
                if (item.reportStatus == '2') {
                  _this.btnShow = false
                }
                if (item.realCompletionDate) {
                  _this.reportFlag = true
                }
                throw new Error('e')
              }
            })
          } catch (e) {}
          if (_this.form.taskType == '30') {
            _this.kpi.data.forEach((item) => {
              if (
                item.realCompletionDate &&
                moment(item.realCompletionDate).diff(moment(item.completionDate), 'day') <= 0
              ) {
                // color green
                item.word = 1
              } else if (
                (item.realCompletionDate &&
                  moment(item.realCompletionDate).diff(moment(item.completionDate), 'day') > 0) ||
                (!item.realCompletionDate && moment().diff(moment(item.completionDate), 'day') > 0)
              ) {
                // color red
                item.word = 2
              }
            })
          }
          if (this.form.taskType == '10' && !this.columnsAddFlag) {
            this.kpi.columns.splice(0, 1, {
              title: '编号',
              dataIndex: 'id',
              key: 'id',
              align: 'center',
              width: '5%',
              scopedSlots: { customRender: 'id' },
            })
            this.kpi.columns.push({
              title: '操作',
              dataIndex: 'action',
              key: 'action',
              align: 'center',
              width: '8%',
              scopedSlots: { customRender: 'action' },
            })
            this.columnsAddFlag = true
          }
          _this.id = _this.form.id
          _this.loadAttachInfo()
          _this.$set(_this.form, 'projectNo', _this.form.projectNo)
          _this.$set(_this.form, 'projectName', _this.form.projectName)
          _this.$set(_this.form, 'businessConfirm', _this.form.businessConfirm + '')
          this.oldList = this.kpi.data
          this.freshFileAmounts()
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    loadAttachInfo() {
      const that = this
      getAction(this.url.getAttachInfo, {
        dbKey: 'Trd',
        busKey: this.id,
        busField: 'workTask',
        busType: 'workTask',
        ftpKey: 'ftp',
      }).then((res) => {
        // if (that.currentUserId != that.form.createUserId) {
        //   var newarr = res.data.filter((item) => {
        //     return item.uploader == that.currentUserId || item.uploader == that.form.createUserId
        //   })
        //   this.fileQueryList = newarr || []
        // } else {
        //   this.fileQueryList = res.data || []
        // }

        this.fileQueryList = res.data || []
      })
    },
    previewAttach(attachId, fileName) {
      if (
        endWith(fileName, 'rar') ||
        endWith(fileName, 'zip') ||
        endWith(fileName, 'dwg') ||
        endWith(fileName, 'tgz')
      ) {
        this.doDownLoadBatch(attachId)
        return
      }

      let params={
        id:attachId,
        ftpKey:'ftp'
      };
      previewAttach(params).then(result=>{
        const url=URL.createObjectURL(result)
        window.open(process.env.BASE_URL+'/pdf/web/viewer.html?file=' + url)
      }).catch(err => {
        this.$message.warning('下载文件失败');
      })
    },
    doDownLoadBatch(attachIds) {
      if (document.getElementById('_attachToolView_downloadfile_frame') == null) {
        let downloadFrame = $('<iframe id="_attachToolView_downloadfile_frame" style="display: none"></iframe>')
        downloadFrame.appendTo($('body'))
      }
      let iframe = document.getElementById('_attachToolView_downloadfile_frame')
      iframe.src =
        this.API_BASE_URL +
        this.url.downLoadBatch +
        '?attachIds=' +
        attachIds +
        '&dbKey=Trd&ftpKey=ftp&token=' +
        Vue.ls.get(ACCESS_TOKEN)
    },
    // 绑busKey
    bindBusKey() {
      if (this.fileList.length > 0) {
        const ids = this.fileList.map(function (item) {
          return item.id
        })
        const jsona = { dbKey: 'Trd', id: ids.toString(), busKey: this.form.id }
        var jsonStr = JSON.stringify(jsona)
        this.$refs.myUpload.bindBusKey(jsonStr)
      }
    },
    deletefj(id) {
      const that = this
      this.$confirm({
        title: '是否确认删除？',
        onOk() {
          postAction(that.url.deleteBatch, { id: id, busField: 'workTask', busType: 'workTask', ftpKey: 'ftp' })
            .then((res) => {
              if (res.code == 1) {
                that.$message.success('删除成功')
                that.fileQueryList.splice(
                  that.fileQueryList.findIndex((item) => item.id === id),
                  1
                )
                that.fileList.splice(
                  that.fileList.findIndex((item) => item.id === id),
                  1
                )
              } else {
                that.$message.warning('删除失败:' + res.msg)
              }
            })
            .catch((res) => {
              that.$message.warning('删除失败:' + res.msg)
            })
        },
        onCancel() {},
      })
    },
    dateFormat(date) {
      return date ? moment(date).format('YYYY-MM-DD') : ''
    },
    openHistory() {
      this.visibleModelHistory = true
    },
    customRow(record, index) {
      return {
        on: {
          mouseenter: (event) => {
            this.tooltipFlag = true
          },
          mouseleave: (event) => {
            this.tooltipFlag = false
          },
        },
      }
    },
    applyData() {
      window.open(`http://10.254.2.37:8383/portal/portalpage/index.jsp?yamitoken=\$YAMITOKEN\$`, '_blank')
    },
    openProcessDetail(record) {
      this.visibleModelProcess = true
      this.processId = record.id + 'p'
    },
    toFile(record) {
      this.busKey = record.id + ''
      this.attachVisible = true
    },
    handleAttachClose() {
      this.attachVisible = false
      this.freshFileAmounts()
    },
    freshFileAmounts() {
      if (this.busKey) {
        const index = this.kpi.data.findIndex((item) => item.id == this.busKey)
        if (index > -1) {
          this.getAttachNum(this.kpi.data[index], index)
        }
      } else {
        this.kpi.data.forEach((data, index) => {
          this.getAttachNum(data, index)
        })
      }
    },
    getAttachNum(data, index) {
      getAction(this.url.getAttachInfo, {
        dbKey: 'Trd',
        busKey: data.id,
        busField: this.busField,
        busType: this.busType,
      }).then((res) => {
        if (res.code == 1 && res.data != null) {
          data.fileAmount = res.data.length
          this.$set(this.kpi.data, index, data)
        }
      })
    },
    checkBoxChange(value) {
      let list = this.oldList
      const _this = this
      var newarr = list.filter(item => {
              if (_this.checked) {
                return item.addReportUserId === _this.currentUserId
              } else {
                return true
              }
          })
      this.kpi.data = newarr 
    }
  },
  watch: {
    fileList: function (newQuestion, oldQuestion) {
      // this.bindBusKey()
      newQuestion.forEach((item) => {
        var newIndex = this.fileQueryList.findIndex((item2) => item2.id === item.id)
        if (newIndex == -1) {
          this.fileQueryList.push(item)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.dailyTask {
  height: 100%;
  font-size: 14px;
  .navigator {
    min-height: 100%;
    padding: 27px 125px 50px;
    background-color: #f5f5f5;
  }
}
.baseinfo {
  background-color: #fff;
  border: 1px solid #eaeaea;
  padding: 20px;
  .btn-box {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
.info-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 14px;
  color: #333333;
  margin-bottom: 14px;
  &:before {
    content: '';
    position: absolute;
    display: block;
    height: 70%;
    top: 15%;
    width: 3px;
    left: 0;
    background-color: #47a4fa;
  }
  /deep/ .ant-btn {
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
  }
}
/deep/ .el-upload__input {
  display: none !important;
}
/deep/ .ant-calendar-picker {
  width: 100%;
}
/deep/ .rowClass {
  background-color: #e6f7ff;
  &:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background-color: #cae9fb;
  }
}
/deep/ .upload-demo {
  display: inline-block;
  margin-left: 17px;
}

/deep/ .report label {
  color: red;
}
.wordColor1 {
  color: #56eb0c;
}
.wordColor2 {
  color: red;
}

/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-modal-title {
  color: #fff;
}

@media (max-width: 1080px) {
  .dailyTask .navigator {
    padding: 27px 30px 50px !important;
  }
}
</style>